<template>
	<view class="cate">
		<!-- 侧边 -->
		 <scroll-view scroll-y="true" class="scroll-view-left">
		 	<view class="left-item" v-for="item,index in navList" :class="{active:activeId==item.id}" :key="index" @click="change(item.id)">{{item.name}}</view>
		 </scroll-view>
		 <!-- 右边内容 -->
		 <scroll-view scroll-y="true" class="scroll-view-right">
		 	<view class="right-cont">
				<view class="right-item" v-for="(item,index) in rightList" :key="index" @click="goDetail(item.id)">
					<image :src="item.primary_pic_url" mode="" class="img"></image>
					<view class="name">
						{{item.name}}
					</view>
					<view class="price">
						{{item.retail_price}}
					</view>
				</view>
			</view>
		 </scroll-view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	// http://shop.bufantec.com/bufan/goods/goodsList?categoryId=1005000 
	export default {
		data() {
			return {
				navList:[],//侧边
				activeId:null,//保存分类的id
				rightList:[],//右边分类列表
			};
		},
		onLoad() {
			request({url:'/category/categoryNav?id=1005000',data:''}).then(res=>{
				console.log(res);
				this.navList = res.navData
				// 把navData数组里面的第一项的id赋值给activeId
				this.activeId = res.navData[0].id
				// 获取侧边第一个的分类数据
				this.goosList(this.activeId)
				
			})
		},
		methods:{
			// 点击侧边
			change(id){
				this.activeId = id
				// 调用右边分类数据的方法
				this.goosList(id)
			},
			  // 侧边数据的方法
			goosList(categoryId){
				request({
					url:'/goods/goodsList?',
					data:{
						categoryId:categoryId
					}
				}).then(res=>{
					console.log(res);
					this.rightList = res.data
				})
			},
			// 跳转详情
			goDetail(id){
				uni.navigateTo({
					url:'../detail/detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.cate{
	display: flex;
	height: 100vh;
	.scroll-view-left{
		width: 200rpx;
		text-align: center;
		flex-shrink: 0;
		.left-item{
			height: 100rpx;
			line-height: 100rpx;
			// position: relative;
		}
		.active{
			color:#c00;
		}
	}
	.scroll-view-right{
		flex:1;
		padding: 0 20rpx;
		box-sizing: border-box;
		.right-cont{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.right-item{
				width: 50%;
				.img{
					width: 100%;
					height: 240rpx;
				}
				.name{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price{
					color: #c00;
				}
				
			}
		}
		
	}
}

</style>
